import React from 'react';
import { ChevronRightIcon } from 'lucide-react';
export const PregnancyPage = () => {
  const categories = [{
    id: 'first-trimester',
    title: 'First Trimester',
    image: 'https://images.unsplash.com/photo-1522771930-78848d9293e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Essential products and resources for weeks 1-12'
  }, {
    id: 'second-trimester',
    title: 'Second Trimester',
    image: 'https://images.unsplash.com/photo-1584559582128-b8be30e2861f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Comfort and preparation items for weeks 13-26'
  }, {
    id: 'third-trimester',
    title: 'Third Trimester',
    image: 'https://images.unsplash.com/photo-1595924738946-7169f41c363c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Everything you need for weeks 27-40'
  }, {
    id: 'hospital-prep',
    title: 'Hospital Prep',
    image: 'https://images.unsplash.com/photo-1535185384036-28bbc8035f28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Hospital bag essentials and birth preparation'
  }];
  const featuredProducts = [{
    id: 'p1',
    name: 'Pregnancy Pillow',
    image: 'https://images.unsplash.com/photo-1595924738946-7169f41c363c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$59.99',
    rating: 4.8,
    reviewCount: 235
  }, {
    id: 'p2',
    name: 'Maternity Support Belt',
    image: 'https://images.unsplash.com/photo-1591375457798-5d9a14a33f5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$29.99',
    rating: 4.5,
    reviewCount: 187
  }, {
    id: 'p3',
    name: 'Prenatal Vitamins',
    image: 'https://images.unsplash.com/photo-1584362917165-526a968579e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$24.99',
    rating: 4.7,
    reviewCount: 312
  }, {
    id: 'p4',
    name: 'Morning Sickness Relief Kit',
    image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$32.99',
    rating: 4.6,
    reviewCount: 143
  }];
  return <div className="w-full">
      {/* Hero Section */}
      <div className="bg-cream py-12 md:py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Pregnancy Essentials
            </h1>
            <p className="font-inter text-gray-600 text-lg mb-6">
              Discover curated products and resources to support you through
              every stage of your pregnancy journey.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="#first-trimester" className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium">
                First Trimester
              </a>
              <a href="#second-trimester" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Second Trimester
              </a>
              <a href="#third-trimester" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Third Trimester
              </a>
              <a href="#hospital-prep" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Hospital Prep
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        {/* Categories */}
        <section className="mb-16">
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Explore By Trimester
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {categories.map(category => <a key={category.id} href={`/pregnancy/${category.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <div className="aspect-[4/3] w-full">
                  <img src={category.image} alt={category.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4 bg-white">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {category.title}
                  </h3>
                  <p className="text-sm text-gray-600 mb-2">
                    {category.description}
                  </p>
                  <div className="flex items-center text-terracotta text-sm font-medium">
                    <span>View products</span>
                    <ChevronRightIcon size={16} className="ml-1" />
                  </div>
                </div>
              </a>)}
          </div>
        </section>
        {/* Featured Products */}
        <section className="mb-16">
          <div className="flex justify-between items-center mb-8">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark">
              Top-Rated Pregnancy Products
            </h2>
            <a href="/pregnancy/all-products" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
              View all
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredProducts.map(product => <a key={product.id} href={`/product/${product.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-white">
                <div className="aspect-square w-full">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {product.name}
                  </h3>
                  <div className="flex items-center mb-2">
                    <div className="flex text-yellow">
                      {[...Array(5)].map((_, i) => <svg key={i} className={`w-4 h-4 ${i < Math.floor(product.rating) ? 'text-yellow fill-current' : 'text-gray-300 fill-current'}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                        </svg>)}
                    </div>
                    <span className="text-xs text-gray-500 ml-1">
                      ({product.reviewCount})
                    </span>
                  </div>
                  <p className="font-medium text-terracotta">{product.price}</p>
                </div>
              </a>)}
          </div>
        </section>
        {/* Resources Section */}
        <section>
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Pregnancy Resources
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <a href="/pregnancy/guides" className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Pregnancy Guides
              </h3>
              <p className="text-gray-600 mb-4">
                Expert advice on navigating each trimester with confidence.
              </p>
              <div className="flex items-center text-terracotta text-sm font-medium">
                <span>Read guides</span>
                <ChevronRightIcon size={16} className="ml-1" />
              </div>
            </a>
            <a href="/pregnancy/checklists" className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Essential Checklists
              </h3>
              <p className="text-gray-600 mb-4">
                Stay organized with our comprehensive pregnancy checklists.
              </p>
              <div className="flex items-center text-terracotta text-sm font-medium">
                <span>Get checklists</span>
                <ChevronRightIcon size={16} className="ml-1" />
              </div>
            </a>
            <a href="/pregnancy/community" className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Community Support
              </h3>
              <p className="text-gray-600 mb-4">
                Connect with other expecting parents in our Cub Club community.
              </p>
              <div className="flex items-center text-terracotta text-sm font-medium">
                <span>Join community</span>
                <ChevronRightIcon size={16} className="ml-1" />
              </div>
            </a>
          </div>
        </section>
      </div>
    </div>;
};